<template>
    <div class="HCcontainer">
        <div class="title">热门城市</div>
        <div class="btnSet">
            <span class="cityBtn" v-for="item in lily"  @click="handleClick(item.name)">{{item.name}}</span>
        </div>
    </div>  
</template>

<script setup>
    import { onMounted,defineProps } from "vue";
    
    const $emit = defineEmits(['selectCity'])
    // 当城市被点击时的回调
    function handleClick(name) {
        $emit('selectCity', name)
    }


    const props = defineProps({
        lily: {
            type: Array,
            // required: true
        }
    });

</script>

<style scoped>

    .HCcontainer {
        margin: 20px;
    }
    .title {
        margin: 10px 0;
    }


    .btnSet{
        display: flex;
        flex-wrap:wrap;
        width: 360px;
        /* background-color: aquamarine; */
    }

    .cityBtn {
        border: 1px solid black;
        padding: 10px 20px;
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;
    }
</style>